<script setup lang='ts'>
// 自定义 规则
//interface Props {
//}
interface TabsItem {
    name: string,
    id: string | number,
}
import { onMounted, ref, defineEmits, defineProps } from 'vue';
const { list, scrollable, bgColor,current } = defineProps({
    list: {
        type: Array<TabsItem>,
        default: () => []
    },
    scrollable: {
        type: Boolean,
        default: () => false
    },
    bgColor: {
        type: String,
        default: () => '#fff'
    },
    current: {
        type: [String, Number],
        default: () => 0
    }
});

/**
 * @property 变量
 */
const emits = defineEmits(['clickItem'])

/**
 * @property  所有请求以api开头 如:apiDataInfo
 * / 


/**
 * @property 自定义事件 以事件名开头 如: clickButton,inputDev
 */

const clickTabsItem = (index: number, item: TabsItem) => {
    emits('clickItem', index, item)
}

/**
 * @property 内置方法
 */


</script>
<template>
    <div :style="{
        backgroundColor: bgColor
    }">
        <up-tabs :list="list" lineWidth="40" lineHeight="2" lineColor="#00BD78" @click="clickTabsItem"
            :scrollable="scrollable" activeStyle="color:#1C1C1C;font-size:28rpx;"
            inactiveStyle="color:#A7A7A7;font-size:28rpx;" :current="current">
            <template #right>
                <slot name="right" />
            </template>
        </up-tabs>
    </div>

</template>
<style lang="scss" scoped></style>